<template>
	<view class="leave-info-box">
		<view class="leave-info-content">
			<!-- <view class="leave-info-name biaoti1">{{ name }}</view>
			<view class="leave-info-classnumber zhengwen1">
				<view class="class-number">{{ sno }}</view>
				<view class="class-name">{{ className }}</view>
			</view> -->
			<view class="leaveapply_box">
				<view class="leave_title">
					请假人基本信息
				</view>
				<view class="leave_row">
					<span class='leave_row_left'>学生姓名</span>
					<span class='leave_row_right'>{{name}}</span>
				</view>
				<view class="leave_row">
					<span class='leave_row_left'>学生学号</span>
					<span class='leave_row_right'>{{sno}}</span>
				</view>
				<view class="leave_row">
					<span class='leave_row_left'>学生班级</span>
					<span class='leave_row_right'>{{className}}</span>
				</view>
			</view>
			<!-- <view class="time-title biaoti1">请假时间</view>
			<view class="leave-info-time zhengwen1">
				<view class="leave-info-left-time">
					<view>开始时间</view>
					<view class="start-time">
						<text class="start-date">{{ beginTime }}</text>
					</view>
				</view>
				<view class="leave-info-right-time">
					<view>结束时间</view>
					<view class="end-time">
						<text class="end-date">{{ endTime }}</text>
					</view>
				</view>
			</view>
			<view class="num-time zhengwen1">总时长{{ hours }}小时</view> -->
			<view class="leaveapply_box">
				<view class="leave_title">
					请假时间
				</view>
				<view class="leave_row">
					<span class='leave_row_left'>开始时间</span>
					<span class='leave_row_right'>{{beginTime}}</span>
				</view>
				<view class="leave_row">
					<span class='leave_row_left'>结束时间</span>
					<span class='leave_row_right'>{{endTime}}</span>
				</view>
				<view class="leave_row">
					<span class='leave_row_left'>总时长</span>
					<span class='leave_row_right'>{{hours}} 小时</span>
				</view>
			</view>
			
			<!-- <view class="leave-explain-title biaoti1">请假理由</view>
			<view class="leave-explain-content zhengwen1">{{ reason }}</view> -->
			<view class="leaveapply_box2">
				<view class="leave_title">
					请假理由
				</view>
					<textarea disabled='true' :value="reason"></textarea>
			</view>
			<!-- 
			<view class="leave-course-title biaoti1">外出路线描述</view>
			<view class="leave-course-content zhengwen1">{{ description }}</view> -->
			<view class="leaveapply_box2">
				<view class="leave_title">
					外出路线描述
				</view>
				<textarea disabled='true' :value="description"></textarea>
			</view>
			
			<!-- <view class="leave-img-title biaoti1">查看图片</view>
			<view class="leave-img"> -->
				<!-- 是否改成滑动模块 -->
				<!-- <view class="imgbox"><image src="../../static/test1.jpg" @click="open"></image></view>
				<view class="imgbox"><image src="../../static/dImg.jpg" @click="open"></image></view>
				<view class="imgbox"><image src="../../static/dImg.jpg" @click="open"></image></view>
				<view class="imgbox"><image src="../../static/dImg.jpg" @click="open"></image></view>
			</view> -->
			<view class="leaveapply_box2" v-if="imgPathTemp" >
				<view class="leave_title">
					查看图片
				</view>
				<image :src="imgPath" mode="widthFix" @click="open"></image>
			</view>
			
			<!-- <view class="teacher">
				<textarea name="" id="yijian" :value="fdyYj" class="zhengwen1"  placeholder-style="text-align: center;line-height: 160rpx;font-size: 36rpx;">
				</textarea>
			</view> -->
			<view class="leaveapply_box2" >
				<view class="leave_title">
					导员意见
				</view>
				<textarea  disabled='true'  :value='fdyYj' ></textarea>
			</view>
			<!-- <view class="yes biaoti1">{{leaveType}}</view> -->
			
			<view class="yes biaoti1" >
				<button class="button"  style="background-color:#77312a;color:white">{{leaveType}}</button>
			</view>
		</view>
		<view>
			<view class="shadebox" v-if="imgshow" @click="close">
				<view class="shadecontentbox"><image :src="imgPath" class="imgHD" mode="widthFix"></image></view>
			</view>
		</view>
	</view>
</template>

<script>
// import imgHD from "@/pages/components/imgHD.vue"
export default {
	data() {
		return {
			leaveId: '',
			sno: '',
			name: '',
			className: '',
			beginTime: '',
			endTime: '',
			hours: '',
			reason: '',
			description: '',
			imgPathTemp:'',
			imgPath:'',
			imgurl: '../../static/test1.jpg',
			imgshow: false,
			fdyYj: '',

			msgType: 'success',
			messageText: '',
			leaveType:''
		};
	},
	methods: {
		//调用上一个页面方法，重新加载数据，刷新数据
		reloadData(){
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			prevPage.$vm.reloadData3()//子调用父
		},
		open() {
			this.imgshow = true;
		},
		close() {
			this.imgshow = false;
		},

	},
	onLoad(options) {
		
		let _this = this;
		_this.leaveType=options.leaveType
		//提交数据请求接口
		uni.request({
			url: this.baseUrl + "/secretary/home/searchSecretaryHomeDetail?satoken="+uni.getStorageSync('satoken'),
			data: {
				leaveId: options.leaveId
			},
			withCredentials: true,
			headers: {
				//"content-type": "application/x-www-form-urlencoded",
				// token: localStorage.getItem('token')
			},
			success: res => {
				console.log(res.data.data);
				let result = res.data.data;
				if (result) {
					_this.sno = result.sno;
					_this.name = result.name;
					_this.className = result.className;
					_this.beginTime = result.beginTime;
					_this.endTime = result.endTime;
					_this.hours = result.hours;
					_this.reason = result.reason;
					_this.description = result.description;
					_this.fdyYj = result.fdyYj;
					if(result.imgPath){
						_this.imgPathTemp=result.imgPath
						_this.imgPath=_this.baseUrl + "/upload/"+result.imgPath
					}
				}
				
			}
		}); 
	},
	components: {
		// imgHD
	}
};
</script>

<style lang="scss">
@import url(@/static/common.css);
.leave-info-box {
	width: 95%;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	.leave-info-content {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;
		.leave-info-name {
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			justify-content: center;
		}
		.leave-info-classnumber {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			.class-number {
				flex: 1;
			}
			.class-name {
				flex: 2;
			}
		}
		.time-title {
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-info-time {
			display: flex;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			border: 1rpx solid #999999;
			padding: 20rpx;
			.leave-info-left-time {
				flex: 1;
				text {
					letter-spacing: 1rpx;
					line-height: 40rpx;
				}
				.start-date {
					margin-right: 20rpx;
				}
			}
			.leave-info-right-time {
				flex: 1;
				text {
					letter-spacing: 1rpx;
					line-height: 40rpx;
				}
				.end-date {
					margin-right: 20rpx;
				}
			}
		}
		.num-time {
			margin-top: 20rpx;
		}
		.leave-explain-title {
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-explain-content {
			width: 100%;
			box-sizing: border-box;
			border: 1rpx solid #999999;
			padding: 20rpx;
		}
		.leave-course-title {
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-course-content {
			width: 100%;
			box-sizing: border-box;
			border: 1rpx solid #999999;
			padding: 20rpx;
		}
		.leave-img-title {
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}
		.leave-img {
			display: flex;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			padding: 10rpx;
			overflow: hidden;
			.imgbox {
				flex: 1;
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
		}
		.teacher {
			width: 100%;
			box-sizing: border-box;
			margin-top: 40rpx;
			textarea {
				box-sizing: border-box;
				width: 100%;
				height: 200rpx;
				border: 1rpx solid #999999;
				padding: 20rpx;
			}
		}
		.yes {
			width: 600rpx;
			height: 80rpx;
			
			margin: 0 auto;
			margin-top: 0rpx;
			line-height: 80rpx;
			text-align: center;
		}
		.no {
			width: 600rpx;
			height: 80rpx;
			border: #999999 solid 1rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			line-height: 80rpx;
			text-align: center;
			margin-bottom: 80rpx;
		}
	}
	.shadebox {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		box-sizing: border-box;
		background: rgba(0, 0, 0, 0.6);
		padding-top: 50%;
		.shadecontentbox {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 50%;
			.imgHD {
				width: 100%;
				margin-top: -25%;
			}
		}
	}
	// }
}
</style>
